<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>品牌列表</title>
    <style>
        body{
            background-image: url("img/firstBackGround.jpg");
            background-size: 100%;
        }
        table{
            /*设置了这个表的单元格就贴在一起了*/
            border-collapse: collapse;
            /*表中的文字居中*/
            text-align: center;
            margin: auto;
        }
        th{
            /*表头的背景颜色*/
            background-color: darkgrey;
        }
        td{
            /*每个单格之间填充5像素*/
            padding: 5px;
        }
        a{
            /*每个a标签周围都填充五个像素*/
            padding: 5px;
        }
        /*单列当鼠标悬停时变色*/
        tr:hover{
           background-color: lightblue;
        }
    </style>
</head>
<body>
<%--设置单击事件  跳转到添加数据的页面--%>
<input type="button" value="新增" onclick="location.href='add-brand.jsp';" style="margin-left: 450px;margin-bottom: 5px" title="新增一个品牌">
    <table border="2px" cellpadding="0" >
        <tr>
                <th>序号</th>
                <th>品牌名称</th>
                <th>企业名称</th>
            <th>排序</th>
            <th>品牌介绍</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        <%--使用便利将请求区中的数据写入表格--%>
        <%--
            forEach遍历集合或数组
            items：要遍历的集合，使用EL写放在作用域中集合的键的名字
            var: 变量名，放在页面域中，指集合中每个元素的名字。这里表示brand对象
            varStatus：指定状态对象的变量名
               index: 索引号,从0开始
               count：第几个元素(计数从1开始)
               first：第一个元素返回true
               last：最后一个元素返回true
            begin: 从哪个元素开始遍历
            end: 到哪个元素结束
            step：步长，每次向后走几个元素，默认是1
     --%>
        <c:forEach items="${brands}" var="brand" varStatus="a">
            <tr>
                <td>${brand.id}</td>
                <td>${brand.brandName}</td>
                <td>${brand.companyName}</td>
                <td>${brand.ordered}</td>
                <%--宽度300像素 文本靠左--%>
                <td style="width: 300px;text-align: left">${brand.description}</td>
                <td>${brand.status==1?"启动":"禁用"}</td>
                <%--    修改的链接              删除的链接--%>
                <%--删除:这里的请求方法是get可以通过地址栏?号传入请求--%>
                <%--修改:利用地址栏传入品牌的id用来查询要修改的品牌信息  在用查出来的品牌数据写入修改的页面--%>
                <td><a href="selectBrandById?id=${brand.id}">修改</a><a href="javascript:deleteBrand('${brand.id}','${brand.brandName}')">删除</a></td>
            </tr>
        </c:forEach>
    </table>
</body>
</html>
<script>
    //确认删除的方法
    function deleteBrand(id,brandName){
        let choose = window.confirm(`你确定要删除\${brandName}这个品牌吗?`);
        if(choose){
            //确认删除跳转到删除页面
            location.href = `delete?id=\${id}`;
        }
    }
</script>